import { Card, Space, Tabs, Typography } from "@arco-design/web-react";
import styles from "./index.module.less";
// import Chart from "@/components/Chart";
import Echarts from "@/components/Echarts";
import { useEffect, useState } from "react";
const TabPane = Tabs.TabPane;
export default function Index() {
  useEffect(() => {}, []);
  return (
    <div>
      <div className={styles["view-container"]}>
        <div className="flex">
          <Card>
            <div className="w-[300px] h-[300px]">
              <span>月能耗排名</span>
              <Tabs type="rounded" className={styles.customTabs}>
                <TabPane key="1" title="水">
                  <Typography.Paragraph>
                    <div className={styles["rank-item"]}>
                      <span>rank-1</span>
                      <span>value-1</span>
                    </div>
                    <div className={styles["rank-item"]}>
                      <span>rank-1</span>
                      <span>value-1</span>
                    </div>
                  </Typography.Paragraph>
                </TabPane>
                <TabPane key="2" title="电">
                  <Typography.Paragraph>
                    Content of Tab Panel 3
                  </Typography.Paragraph>
                </TabPane>
                <TabPane key="3" title="气">
                  <Typography.Paragraph>
                    Content of Tab Panel 4
                  </Typography.Paragraph>
                </TabPane>
              </Tabs>
            </div>
          </Card>
          <Card className="ml-7">
            <div>月能耗走势</div>
            <Echarts
              option={{
                xAxis: {
                  type: "category",
                  data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
                },
                yAxis: {
                  type: "value",
                },
                series: [
                  {
                    data: [820, 932, 901, 934, 1290, 1330, 1320],
                    type: "line",
                    smooth: true,
                  },
                ],
              }}
              style={{ width: "930px", height: "300px" }}
            />
          </Card>
        </div>
        <Space />
        <div className="flex">
          <Card>
            <div>月污水排放量</div>
            <Echarts
              option={{
                tooltip: {
                  trigger: "axis",
                  axisPointer: {
                    type: "shadow",
                  },
                },
                grid: {
                  left: "3%",
                  right: "4%",
                  bottom: "3%",
                  containLabel: true,
                },
                xAxis: [
                  {
                    type: "category",
                    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
                    axisTick: {
                      alignWithLabel: true,
                    },
                  },
                ],
                yAxis: [
                  {
                    type: "value",
                  },
                ],
                series: [
                  {
                    name: "Direct",
                    type: "bar",
                    barWidth: "60%",
                    data: [10, 52, 200, 334, 390, 330, 220],
                  },
                ],
              }}
              style={{ width: "800px", height: "200px" }}
            />
          </Card>
          <Card className="ml-7">
            <div>月污水排放超标比例</div>
            <Echarts
              option={{
                tooltip: {
                  trigger: "item",
                },
                legend: {
                  top: "5%",
                  left: "center",
                },
                series: [
                  {
                    name: "Access From",
                    type: "pie",
                    radius: ["40%", "70%"],
                    avoidLabelOverlap: false,
                    itemStyle: {
                      borderRadius: 10,
                      borderColor: "#fff",
                      borderWidth: 2,
                    },
                    label: {
                      show: false,
                      position: "center",
                    },
                    emphasis: {
                      label: {
                        show: true,
                        fontSize: 40,
                        fontWeight: "bold",
                      },
                    },
                    labelLine: {
                      show: false,
                    },
                    data: [
                      { value: 1048, name: "Search Engine" },
                      { value: 735, name: "Direct" },
                      { value: 580, name: "Email" },
                      { value: 484, name: "Union Ads" },
                      { value: 300, name: "Video Ads" },
                    ],
                  },
                ],
              }}
              style={{ width: "430px", height: "200px" }}
            />
          </Card>
        </div>
      </div>
    </div>
  );
}
